{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Title</title>
        <!--使用x-ua-compatible来设置IE浏览器兼容模式 最新的渲染模式-->
        <meta http-equiv="x-ua-compatible" content="IE=edge" />

        <!--
        viewport表示用户是否可以缩放页面
        width指定视区的逻辑宽度
        device-width指示视区宽度应为设备的屏幕宽度
        initial-scale指令用于设置web页面的初始缩放比例
        initial-scale=1则将显示未经缩放的web文档
    -->
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <!--引入bootstrap的css和js-->

        <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.min.css' %}" />
        <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
        <script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
    </head>
    <body>
        <div class="container-fluid" style="background-color: #1c1d1dff; height: 500px">
            <div class="row">
                <div class="col-md-2 col-lg-2" style="background-color: #d7a052ff; height: 500px">
                    <ul class="list-unstyled text-center">
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                </div>
                <div class="col-md-10 col-lg-10" style="background-color: #e04c62ff; height: 500px"></div>
            </div>
        </div>
    </body>
</html>
